<template>
  <view>
    <view class="card-background"></view>
    <view class="card-view ver-layout">
      <view class="hor-layout-center card-title">
        <view class="text">Account Balance</view>
        <ali-icon size="22" font="icon-yanjing" color="white"></ali-icon>
      </view>
      <view class="number-view">(₦)0</view>
      <view class="divider-line"></view>
      <view class="hor-layout-side-center card-bottom" @click="toPage(rewardBalance)">
        <view>
          Reward Balance
          <text style="margin-left: 20px">(₦)500</text>
        </view>
        <ali-icon size="30" font="icon-pullright" color="white"></ali-icon>
      </view>
    </view>
    <view class="hor-layout center-buttons">
      <u-button type="success" text="WithDraw" icon="chat" @click="toPage(withdraw)"></u-button>
      <u-button style="margin-left: 10px" type="primary" text="Dealing(0)" icon="chat"
                @click="toPage(dealing)"></u-button>
    </view>
    <view class="history-btn hor-layout-side-center" @click="toPage(accountHistory)">
      <view>Account Balance Change History</view>
      <view class="hor-layout right-view">
        <view>ALL</view>
        <u-icon size="20" name="arrow-right" color="#999999"></u-icon>
      </view>
    </view>
  </view>
</template>

<script>

import {rewardBalance,accountHistory, dealing, withdraw} from "@/router"

export default {
  name: "wallet",
  data() {
    return {
      rewardBalance,
      accountHistory,
      dealing,
      withdraw
    }
  },
  methods: {}
}
</script>

<style scoped lang="scss">
page {
  background: #f7f7f7;
}

.card-background {
  width: 100%;
  height: 170px;
  background: linear-gradient(to bottom, #55BBB3 0%, #79beb9 100%);
}

.card-view {
  position: absolute;
  top: 15px;
  left: 5%;
  width: calc(90% - 20px);
  height: 190px;
  color: white;
  padding: 10px;
  background: #65a6f2;
  border-radius: 10px;
  box-shadow: 0 0 5px #284257;

  .card-title {
    margin-top: 30px;

    .text {
      margin-right: 10px;
    }
  }

  .number-view {
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: xx-large;
  }

  .card-bottom {
    margin: auto 0px;
  }
}

.divider-line {
  width: 100%;
  height: 1px;
  background: white;
}

.center-buttons {
  margin: auto;
  margin-top: 71px;
  width: 80%;
}

.history-btn {
  width: 90%;
  height: 35px;
  padding: 5px;
  border-radius: 7px;
  border: 1px solid #dcd6d6;
  background: white;
  margin: auto;
  margin-top: 20px;
  font-weight: bold;
  font-size: small;

  .right-view {
    color: #999999;
  }
}
</style>
